{% extends "../main.html" %}

{% block title %}{{ _("Registration") }}{% end %}

{% block header %}
    <link rel="stylesheet" href="/static/css/pages/public/registration.css" type="text/css" />
    <script src="/static/js/pages/public/registration.js"></script>
{% end %}

{% block modals %}
    {% from libs.XSSImageCheck import get_new_avatar %}
    {% from tornado.options import options %}
    {% from libs.XSSImageCheck import filter_avatars %}
    {% from libs.XSSImageCheck import existing_avatars %}
    {% from models.Team import Team %}
    <!-- Select Avatar -->
    {% if options.teams %}
        {% set dir = "user" %}
    {% else %}
        {% set dir = "team" %}
    {% end %}
    {% set avatars = filter_avatars("user") %}
    {% set existing = existing_avatars(dir) %}
    <div id="change-user-avatar-modal" class="modal hide fade" style="display: none; {% if len(avatars) > 0 %}width: 750px; margin-left: -375px;{% end %}">
        <div class="modal-header">
            <button id="avatarclose" type="button" class="close" data-dismiss="modal">&times;</button>
            <h3>{{ _("Select Avatar") }}</h3>
        </div>
        <div class="modal-body">
            {% raw xsrf_form_html() %}
            {% if len(avatars) > 0 %}
                <div style="border-top: solid 1px rgb(92, 92, 92); margin-top: -5px; margin-bottom: 20px;"></div>
                <span style="float: right; padding-right: 10px; margin-top: -15px; font-size: small;"><i class="fa fa-certificate"></i> {{ _("indicates use by another player") }}</span>
                <br>
                {% for avatar in avatars[::3] %}
                    <div class="row">
                        <div class="span3" style="position: relative;">
                            <center>
                                {% if avatar in existing %}<i class="fa fa-certificate avatarused"></i><i class="fa fa-certificate avatarused-top"></i>{% end %}
                                <a href="#" class="useravatarimg" value="{{avatar}}"><img src="/avatars/{{avatar}}"  class="img-polaroid" style="width: 200px;"></a>
                            </center>
                        </div>
                        {% if avatars.index(avatar) + 1 < len(avatars) %}
                            {% set avatar1 = avatars[avatars.index(avatar) + 1] %}
                            <div class="span3" style="position: relative;">
                                <center>
                                    {% if avatar1 in existing %}<i class="fa fa-certificate avatarused"></i><i class="fa fa-certificate avatarused-top"></i>{% end %}
                                    <a href="#" class="useravatarimg" value="{{avatar1}}"><img src="/avatars/{{avatar1}}"  class="img-polaroid" style="width: 200px;"></a>
                                </center>
                            </div>
                        {% end %}
                        {% if avatars.index(avatar) + 2 < len(avatars) %}
                            {% set avatar2 = avatars[avatars.index(avatar) + 2] %}
                            <div class="span3" style="position: relative;">
                                <center>
                                    {% if avatar2 in existing %}<i class="fa fa-certificate avatarused"></i><i class="fa fa-certificate avatarused-top"></i>{% end %}
                                    <a href="#" class="useravatarimg" value="{{avatar2}}"><img src="/avatars/{{avatar2}}"  class="img-polaroid" style="width: 200px;"></a>
                                </center>
                            </div>
                        {% end %}
                    </div>
                    <br/>
                {% end %}
            {% end %}
        </div>
    </div>
{% end %}

{% block content %}
    <div class="container">
        <h1>
            <i class="fa fa-pencil"></i>
            {{ _("Registration") }}
        </h1>
        <br />
        {% if errors is not None and len(errors) != 0 %}
            {% for error in errors %}
                <div class="alert alert-error">
                    <a class="close" data-dismiss="alert" href="#">&times;</a>
                    <h4 class="alert-heading">{{ _("ERROR") }}</h4>
                    {{ error }}
                </div>
            {% end %}
        {% end %}
        <div class="{% if len(avatars) == 0 %}span8 offset1 {% end %}well" style="position: relative;">
        {% if not suspend %}
            <legend>
                {{ _("Welcome to the Scene") }}
            </legend><!-- http://www.youtube.com/watch?v=xIs_5nfJKu4&list=PLC2FCB2871C396459 -->
            <form class="form-horizontal" action="/registration" method="post" enctype="multipart/form-data">
                {% raw xsrf_form_html() %}
                {% if len(avatars) > 0 %}
                    {% set avatarimg = get_new_avatar("user", not options.teams) %}
                    <div class="control-group" style="float: right; position: absolute; right: 30px; top: 40px;">
                        <img id="avatarimage" src="/avatars/{{avatarimg}}" class="img-polaroid" style="width: 350px; height: 175px; object-fit: cover"/>
                        <div class="controls" style="margin-top: 15px; margin-left: 0px;">
                            <input id="user_avatar_select" name="user_avatar_select" type="hidden" value="{{avatarimg}}" />
                            {% if len(avatars) > 0 %}<a data-toggle="modal" class="btn btn-primary" href="#change-user-avatar-modal"> {{ _("Select New Avatar") }} </a>&nbsp;&nbsp;{% end %}
                            <a id="uploadbutton" class="btn btn-primary" href="#">{{ _("Upload Avatar") }}</a>&nbsp;&nbsp;(w500 x h250)
                            <input id="user-avatar" name="avatar" type="file" accept="image/bmp,image/jpeg,image/gif,image/png" style="display: none;"/>
                        </div>
                    </div>
                {% end %}
                <div class="control-group">
                    <label class="control-label" for="handle">
                        <i class="fa fa-user"></i>
                        {{ _("Handle") }}
                    </label>
                    <div class="controls">
                        <input required id="handle" name="handle" maxlength="16" minlength="3" placeholder="{{ _('Player Alias') }}" type="text"
                            rel="popover" pattern="^[a-zA-Z0-9_\-\.]{3,16}$"
                            data-original-title="{{ _('Player Alias') }}"
                            data-content="{{_('Your handle must be 3-16 alphanumeric characters.  Underscore, dash, and dots allowed.')}}" />
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="playername">
                        {{ _("Player Name") }}
                    </label>
                    <div class="controls">
                        <input required id="playername" name="playername" maxlength="64" minlength="3" placeholder="{{_('Name')}}" type="text"
                            rel="popover" pattern="^[a-zA-Z0-9 ]{3,64}$"
                            data-original-title="{{ _('Player Name') }}"
                            data-content="{{_('Your name, visible to game administrators.  Your name can be 3-64 alphanumeric characters')}}" />
                    </div>
                </div>
                {% if options.require_email %}
                <div class="control-group">
                    <label class="control-label" for="email">
                        {{ _("Email") }}
                    </label>
                    <div class="controls">
                        <input required id="email" name="email" maxlength="64" minlength="3" placeholder="{{ _('Email') }}" type="text"
                            rel="popover" pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$"
                            data-original-title="{{_('Player Email')}}"
                            data-content="{{_('Your email, visible to game administrators.')}}" />
                    </div>
                </div>
                {% end %}
                <hr style="margin-right: 400px;">
                {% if options.teams %}
                    {% if options.public_teams %}
                        <input type="radio" class="teammode" name="teammode" value="join" checked><h5 style="display: inline;">{{ _("Join Existing Team") }}</h5>
                        <input type="radio" class="teammode" name="teammode" value="create"><h5 style="display: inline;">{{ _("Start a New Team") }}</h5>
                        <br/><br/>
                        <div id="teammode-create" style="display: none;">
                            <div class="control-group">
                                <label class="control-label" for="team_name">{{ _("Team Name") }}</label>
                                <div class="controls">
                                    <input id="team-name" name="team_name" maxlength="24" minlength="3" type="text" placeholder="{{ _('Team Name') }}"
                                        rel="popover" pattern="^[a-zA-Z0-9 _\-\.]{3,24}$"
                                        data-original-title="{{_('New Team Name')}}"
                                        data-content="{{_('Choose a name for your new team!')}} [3-24 {{_('Characters')}}]" >
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="motto">{{ _("Motto") }}</label>
                                <div class="controls">
                                    <input id="motto" name="motto" maxlength="32" type="text" placeholder="{{ _('Team Motto') }}"
                                        rel="popover" pattern="^[a-zA-Z0-9 _\-\.]{,32}$"
                                        data-original-title="{{_('Team Motto')}}"
                                        data-content="{{_('Optional')}}: {{_('What is your teams motto?')}} [{{ _('Max') }}: 32 {{_('Characters')}}]">
                                </div>
                            </div>
                        </div>
                    {% else %}
                        <h5 style="margin-left: 20px; margin-bottom: 15px;">{{ _("Join Existing Team") }}</h5>
                    {% end %}
                    <div id="teammode-join" class="control-group">
                        <label class="control-label" for="team-code">{{ _("Team Code") }}</label>
                        <div class="controls">
                            <input id="team-code" name="team-code" type="text" placeholder="{{ _('Team Code') }}"
                                rel="popover"
                                data-original-title="{{_('Team Code')}}"
                                data-content="{{_('Provide the code used to join an existing team.  Visible to other team members on their home page.')}}" >
                        </div>
                    </div>
                {% else %}
                    <div class="control-group">
                        <label class="control-label" for="motto">{{ _("Motto") }}</label>
                        <div class="controls">
                            <input id="motto" name="motto" maxlength="32" type="text" placeholder="{{ _('Motto') }}"
                                rel="popover" pattern="^[a-zA-Z0-9_\-\.]{,32}$"
                                data-original-title="{{_('Motto')}}"
                                data-content="{{_('Optional')}}: {{_('What is your motto?')}} [{{ _('Max') }}: 32 {{_('Characters')}}]">
                        </div>
                    </div>
                {% end %}
                <hr style="margin-right: 400px;">
                <div class="control-group">
                    <label class="control-label" for="pass1">{{ _("Account Password") }}</label>
                    <div class="controls">
                        <input required id="pass1" name="pass1" minlength="{{ options.min_user_password_length }}"  placeholder="{{ _('Password') }}" type="password"
                            autocomplete="off"
                            rel="popover"
                            data-original-title="{{_('Password')}}"
                            data-content="{{_('Enter a complex password of')}} {{ options.min_user_password_length }}+ {{_('Characters')}}" />
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="pass2">{{ _("Confirm Account Password") }}</label>
                    <div class="controls">
                        <input required id="pass2" name="pass2" minlength="{{ options.min_user_password_length }}"  placeholder="{{ _('Confirm Password') }}" type="password"
                            autocomplete="off"
                            rel="popover"
                            data-original-title="{{_('Confirm Password')}}"
                            data-content="{{_('Enter the same password as before')}}" />
                    </div>
                </div>
                {% if options.banking %}
                <div class="control-group">
                    <label class="control-label" for="bpass1">{{ _("Bank Account Password") }}</label>
                    <div class="controls">
                        <input required id="bpass" name="bpass" maxlength="{{ options.max_password_length }}" placeholder="{{ _('Bank Account Password') }}" type="password"
                            autocomplete="off"
                            rel="popover"
                            data-original-title="{{_('Password')}}"
                            data-content="{{_('Used to secure your (in-game) bank account.')}} [{{ _('Max') }}: {{ options.max_password_length }} {{_('Characters')}}].  {{_('Please do NOT enter your real bank account password.')}}" />
                    </div>
                </div>
                {% end %}
                {% if options.restrict_registration %}
                    <div class="control-group">
                        <label class="control-label" for="token">{{ _("Registration Token") }}</label>
                        <div class="controls">
                            <input required id="regtoken" name="token" placeholder="{{ _('Token') }}" type="text"
                                rel="popover" pattern="^[a-fA-F0-9]{1,6}$"
                                data-original-title="{{_('Registration Token')}}"
                                data-content="{{_('Get your registration token from reception')}}" />
                        </div>
                    </div>
                {% end %}
                {% if options.privacy_policy_link %}
                    <div class="control-group">
                        <label class="control-label" for="privacy_policy_accept">{{ _("I accept the") }} <a href="{{ options.privacy_policy_link }}">{{ _("Privacy Policy") }}</a></label>
                        <div class="controls">
                            <input required id="privacy_policy_accept" name="privacy_policy_accept" type="checkbox" />
                        </div>
                    </div>
                {% end %}
                <br />
                <div class="control-group">
                    <div class="controls">
                        <button class="btn btn-primary" type="submit">
                            {{ _("Register Account") }}
                        </button>
                    </div>
                </div>
            </form>
        {% else %}
            <h4 style="text-align: center;"><i class="fa fa-group"></i>&nbsp;&nbsp;{{ _("The game is not accepting new players at this time.") }}</h4>
        {% end %}
        </div>
    </div>
{% end %}
